<template>
  <!-- 首页 -->
  <view class="home-page">
    <!-- 顶部 banner 区域 -->
    <view class="banner">
      <!-- 标题与文案 -->
      <view class="banner-text">
          <view class="title">Rebirthealth</view>
          <view class="slogan">当健康陷入困境，希望从这里开始</view>
          <view class="desc">当身体的健康出现风险，</view>
          <view class="desc"> 当疾病的困扰无法摆脱， </view>
          <view class="desc"> 当健康已经无路可走， </view>
          <view class="desc" style="margin-top: 20rpx">
            此刻，你需要一个新的方案
          </view>
			<text class="sub-desc">
			  在Rebirthealth，发布你的健康诉求，汇聚全球智慧，找到属于你的解决方案，我们相信，希望从未消失，只是需要被重新点亮
			</text>
      </view>

      <!-- 快捷按钮区 -->
      <view class="shortcut-btns">
        <view class="btn" v-for="(btn, idx) in bountyList" :key="idx" @click="handleShortcut(btn)">{{ btn.title }}
        </view>
      </view>

      <!-- 悬赏求助区 -->
      <view class="input-row">
        <u-input placeholder="如果有疑问，可以在此发布任务！" v-model="bountyInput" color="#fff" :customStyle="{
          border: '2rpx solid rgba(51, 69, 245, 1);',
          background: 'rgba(0, 0, 0, 0.5);',
          height: '90rpx',
          boxSizing: 'border-box',
        }" />
        <view class="bounty-btn" @click="handleBounty">悬赏求助</view>
      </view>
    </view>

    <!-- 运作方式区 -->
    <view class="section-title">运作方式</view>
    <view class="section run-wrap">
      <swiper circular :indicator-dots="true" :autoplay="true" :interval="5000" :duration="3000" style="height: 770rpx">
        <swiper-item v-for="(item, index) in runList" :key="index">
          <view style="padding: 0 20rpx;">
            <image class="run-img" :src="item.bg"></image>
            <view class="run-title"> {{ item.name }} </view>
            <text class="section-desc">
              {{ item.content }}
            </text>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <view class="section-title">评审团队</view>
    <!-- 评审团队区 -->
    <view class="section team-wrap">
      <text class="section-desc" style="color: #333">
         Rebirthealth汇聚了来自全球的顶尖学者和特殊智慧持有者，他们承载着独特的文化传承与经验知识，致力于为您的健康关切提供多元化视角和可能性方案的评估。每一位成员都经过严格筛选和背景核实。 
      </text>

      <swiper circular :indicator-dots="true" :autoplay="true" :interval="5000" :duration="3000" style="height: 930rpx">
        <swiper-item v-for="(item, index) in teamList" :key="index">
          <view class="team-card" style="padding: 0 20rpx;">
            <view class="card-title">
              <image :src="item.img"></image>
              <text>{{ item.name }}</text>
            </view>
            <view class="card-subtitle">背景</view>
            <view class="section-desc">
              {{ item.info1 }}
            </view>
            <view class="card-subtitle">能力</view>
            <view class="section-desc">
              {{ item.info2 }}
            </view>
          </view>
        </swiper-item>
      </swiper>
      <!-- 团队卡片（示例，可循环渲染） -->
    </view>
    <!-- 为什么选择区 -->
    <view class="section-title">为什么要选择Rebirthealth</view>
    <view class="why-wrap section">
      <swiper class="my-swiper" circular :indicator-dots="true" :autoplay="true" :interval="5000" :duration="3000"
        style="height: 870rpx">
        <swiper-item v-for="(item, index) in reasonList" :key="index">
          <view class="why-content" style="padding: 0 20rpx;">
            <image :src="item.icon" class="content-img"></image>
            <view class="why-title">{{ item.name }}</view>
            <text class="section-desc">
              {{ item.info }}
            </text>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 会员反馈区 -->
    <view class="section-title">来自1000万会员的真实反馈</view>
    <swiper circular :autoplay="true" :interval="5000" :duration="3000" style="height: 500rpx">
      <swiper-item v-for="(card, index) in feedbackList" :key="index">
        <view class="section feedback-card">
          <!-- 反馈卡片（示例，可循环渲染） -->
          <view style="display: flex; align-items: center; margin-bottom: 32rpx">
            <image class="feedback-avatar" :src="card.avatar"></image>
            <view class="feedback-name">{{ card.name }}</view>
          </view>
          <view class="section-desc">{{ card.text }}</view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { getSuccessList } from '@/api'
export default {
  data() {
    return {
      bountyList: [
        { text: "长期失眠怎么办？", bgColor: "#007aff" },
        { text: "满脸痘痘怎么办？", bgColor: "#ff9500" },
        { text: "腰膝酸软无力", bgColor: "#ff2d2d" },
      ],
      bountyInput: "", // 悬赏输入框内容
      runList: [
        {
          bg: "https://www.rebirthealth.com/static/images/run1.png",
          name: "发布诉求，汇聚全球智慧资源",
          content:
            "无论面临何种健康问题，均可通过本平台发布任务需求。来自全球各领域的顶尖专业人员、非物质文化遗产传承人、资深民间学者以及掌握特殊技艺的工匠大师，将共同参与，为需求者提供专业化、个性化的经验分享与解决方案。",
        },
        {
          bg: "https://www.rebirthealth.com/static/images/run2.png",
          name: "专业评审，量身定制方案，全程防控",
          content:
            "承接人将紧密结合需求者的个性化需求，通过系统梳理健康档案与调查问卷，全面掌握基础数据与预期目标。基于专业视角和行业经验，承接人将进行科学研判、合理规划，精准制定契合实际的专项方案。从方案设计到实施反馈，全过程严格遵循标准化服务流程，确保方案既具备专业水准又具有可操作性。",
        },
        {
          bg: "https://www.rebirthealth.com/static/images/run3.png",
          name: "全程跟踪，确保任务完成",
          content:
            "我们为需求者提供从任务发布到方案最终执行的全程跟踪服务，确保每个环节均有专业团队紧密跟进与规范处理。借助完善的进度监控机制，专业团队能够实时掌握任务进展情况，及时发现并化解潜在风险，有效保障项目按时高质量完成。",
        },
      ],
      teamList: [
        {
          name: "非遗传承人",
          info1:
            "非遗传承人是人类非物质文化遗产的守护者，他们的技艺和知识通常源自百年甚至千年的家族传承，或是某一地区独有的文化宝藏。这些传承人不仅掌握了古老的技艺，还深刻理解其背后的文化和哲学内涵，尤其是对自然与人体关系的深刻洞察。",
          info2:
            "非遗传承人擅长运用传统秘方、手工技艺和自然疗法，解决现代难以攻克的健康问题。他们通过自然物质应用、经络调理、能量调理等方式，为关注身心平衡的独特挑战提供基于传统智慧的视角与实践思路。",
          img: "https://www.rebirthealth.com/static/images/fy.png",
        },
        {
          name: "道家医者",
          info1:
            "道家智慧实践者深研道家养生哲学，秉承“天人合一”与“道法自然”的核心理念。他们通常历经长期研修，精研气功、太极、针灸等传统身心调适技法，致力于探索自然能量与个体状态的和谐互动。道家智慧实践者对经络学说与阴阳理论有深厚理解，视人体为与自然能量韵律紧密相连的微缩宇宙。",
          info2:
            "道家智慧实践者擅长运用气功导引、阴阳平衡理念及艾灸等传统技法，为关注气血流通与整体状态调和的探索者提供道家哲学指导下的实践路径。他们不仅关注当下的身心体验，更重视理解状态形成的深层关联，为寻求身心本源和谐的探索提供基于整体观的智慧视角。",
          img: "https://www.rebirthealth.com/static/images/djfm.png",
        },
        {
          name: "道家通灵人",
          info1:
            "道家能量感知研究者专注于探索宇宙自然能量的传统认知体系，秉持道家宇宙观与生命观。通常经过长期研修，他们致力于理解个体能量状态与自然能量场之间的互动关联，探索其中的规律与可能性。",
          info2:
            "道家能量感知研究者擅长运用传统能量观与身心互动理念，为关注自身能量状态与宇宙能量关联的探索者提供道家哲学视角下的感知交流与调适思路。他们通过能量感知理念探讨与身心状态交流等方式，回应关于身心体验的独特关切，为寻求内在状态调和的探索提供基于道家整体观的启发性视角。",
          img: "https://www.rebirthealth.com/static/images/djtlr.png",
        },
        {
          name: "苗族传统智慧",
          info1:
            "苗族传统智慧守护者是苗族深厚文化传承的重要载体，拥有独特的自然观与身心调适经验体系。他们秉持“人与自然和谐共生”的核心哲学，认为个体状态与自然界的草木、矿物等资源存在深刻联结，并通过世代相传的生活智慧与实践经验，探索身心平衡之道。",
          info2:
            "苗族传统智慧守护者擅长运用草木特性、矿物应用及独特的身体感知与调适技法，为关注身心状态与自然能量互动的探索者提供基于苗族自然哲学的经验视角与实践路径。他们通过世代积累的经验智慧，为寻求身心平衡与长期状态调和的探索提供源于自然的独特理解与调适思路。",
          img: "https://www.rebirthealth.com/static/images/my.png",
        },
        {
          name: "佛门健康智慧",
          info1:
            "佛学身心修养导师融合佛教深邃哲学与身心调适智慧，秉持“身心合一”的和谐理念。他们通常历经长期修行实践，精研佛法义理、自然物质应用经验及心灵沟通方法。佛家传承千年的智慧体系，为寻求内心安宁与生命理解的探索者提供了丰富的思想资源。",
          info2:
            "佛学身心修养导师擅长通过佛法智慧启迪、自然物质应用经验交流与心灵对话，为关注身心和谐与内在安宁的探索者提供基于佛学慈悲与智慧的引导视角与实践建议。他们致力于陪伴探索者理解生命体验的因缘关联，为寻求内心澄明与生命平衡的旅程提供佛学视角下的精神滋养与调适参考。",
          img: "https://www.rebirthealth.com/static/images/fmyz.png",
        },
        {
          name: "民间经验传承人",
          info1:
            "民间经验传承者是世代守护特定生活智慧与身心调适传统的实践者。他们承载着家族或地域特有的实践体系，这些智慧通常历经数代人的积淀与应用，尤其在关注身心状态的长期调适方面积累了丰富的经验认知。民间经验传承者秉持个体状态与自然律动息息相关的理念，视世代积累的实践精华为探索身心和谐的重要参考。",
          info2:
            "民间经验传承者擅长运用祖辈积淀的经验记录与独特技法实践，为关注身心状态与自然关联的探索者提供基于传统自然观的个性化经验视角与调适思路。他们通过对草木特性、矿物应用的代际认知及阴阳五行等传统理念的理解，为寻求身心平衡与持续状态调和的探索提供源于生活智慧的实践参考与方法启示。",
          img: "https://www.rebirthealth.com/static/images/mjzcyz.png",
        },
        {
          name: "藏族传统智慧传承者",
          info1:
            "藏族传统智慧传承者是藏族深厚文化体系的重要守护者，拥有独特的宇宙观、自然观与身心调适经验体系。他们秉持“人体与自然界和谐统一”的核心哲学，认为个体状态与自然界的能量、资源存在深刻联结，并通过世代相传的生活实践智慧，探索身心平衡之道。其认知体系以“五源学说”为重要思想基础。",
          info2:
            "藏族传统智慧传承者擅长运用高原草本特性认知、矿物应用经验及独特的身心调适技法，为关注身心状态与自然能量互动的探索者提供基于藏族宇宙观与五源学说的经验视角与实践参考。他们通过世代积累的智慧，为寻求身心和谐与内在平衡的探索提供源自高原文化的独特理解与调适思路。",
          img: "https://www.rebirthealth.com/static/images/mjzy.png",
        },
      ],
      reasonList: [
        {
          icon: "https://www.rebirthealth.com/static/images/why1.png",
          name: "资金平台担保",
          info: "发布者的资金将由平台作为监管和保护，分阶段、按批次逐步由平台放给获得最佳方案的专业人员。这种机制确保了资金的安全性，同时也为发布者提供了一个更加透明和可靠的环境。在这样的体系下，资金不会一次性全部释放给承接方，而是根据项目进展和达成的阶段目标来逐步发放。这样的做法有效降低风险，确保资金的使用效率和效果，同时也激励承接方，以达到既定目标。平台的担保作用不仅体现在资金的分配上，还包括对项目方的评估和监督，确保所有参与方的利益得到妥善保护。",
        },
        {
          icon: "https://www.rebirthealth.com/static/images/why2.png",
          name: "10000+奇人异士",
          info: "这个平台成功地吸引了来自全球各个角落、拥有不同文化背景的独特智慧传承者。在民间，通过口耳相传，也有许多身怀深厚生活智慧与特殊经验体系的人士被发掘出来。他们各自拥有着源于特定文化传统与实践积累的非凡认知与技艺，这些经验体系丰富多样，令人赞叹。同时，有些人还掌握着独到的经验传承，这些传承往往蕴含着深厚的文化底蕴和历史积淀，是他们独特文化身份的体现。他们常探索运用草木特性、矿物应用及独特的身心调适技法，回应现代人关于身心平衡的复杂关切。他们通过理解人与自然能量的互动关联，致力于为个体探索身心和谐与内在平衡提供源自传统的独特视角与实践参考。",
        },
        {
          icon: "https://www.rebirthealth.com/static/images/why3.png",
          name: "量身定制服务",
          info: "我们将基于发布者自愿分享的健康关切描述、过往健康管理历程的体会以及当前身心状态的自我感知信息，协助整合这些信息，为任务发布者汇聚多元化视角与可能性方案。这些视角与方案将融合平台智慧持有者独特的经验体系和文化传承，旨在为发布者提供高度契合其关切背景的探索思路与实践参考，支持其在身心平衡的旅程中探索更多可能性。",
        },
        {
          icon: "https://www.rebirthealth.com/static/images/why4.png",
          name: "平台全程跟踪",
          info: "从承接人提交的方案评审阶段开始，直至发布者发布的任务圆满完成，平台将指派专人进行全程跟踪。这一过程确保了任务的每一个环节都得到全面细致的关注和管理，从而保证了任务执行的效率和质量。专人负责的机制意味着从方案的初步评估到最终的成果交付，每一个步骤都有明确的责任人，确保了任务的顺利进行和最终的成功完成。",
        },
      ],
      // 评审团队/反馈数据（示例）
      feedbackList: [
        {
          avatar: "https://www.rebirthealth.com/static/images/fy.png",
          name: "葡萄酸不酸呀",
          text: "非遗传承人是人类非物质文化遗产的守护者，他们的技艺和知识通常源自百年甚至千年的家族传承，或是某一地区独有的文化宝藏。这些传承人不仅掌握了古老的技艺，还深刻理解其背后的文化和哲学内涵，尤其是对自然与人体关系的深刻洞察。",
        },
        {
          avatar: "https://www.rebirthealth.com/static/images/fy.png",
          name: "葡萄酸不酸呀1",
          text: "非遗传承人是人类非物质文化遗产的守护者，他们的技艺和知识通常源自百年甚至千年的家族传承，或是某一地区独有的文化宝藏。这些传承人不仅掌握了古老的技艺，还深刻理解其背后的文化和哲学内涵，尤其是对自然与人体关系的深刻洞察。",
        },
      ],
    };
  },
  onLoad() {
    this.getList()
  },
  methods: {
    // 快捷按钮点击
    handleShortcut(btn) {
      uni.navigateTo({
        url: `/pages/success/successDetail?caseId=${btn.caseId}`,
      });
    },
    // 悬赏求助点击
    handleBounty() {
      // if (!this.bountyInput) {
      //   uni.showToast({ title: "请输入任务内容", icon: "none" });
      //   return;
      // }
      // uni.showToast({ title: "发布悬赏成功！", icon: "none" });
      uni.navigateTo({
        url: `/pages/reward/reward?title=${this.bountyInput}`
      })
      // 可扩展：调用接口提交 this.bountyInput
    },
    async getList() {
      console.log(123)
      let res = await getSuccessList({
        pageNo: 1,
        pageSize: 3,
        orderBy: "seq",
        status: 0,
      });
      this.bountyList = res.list;
    },
  },
};
</script>

<style lang="less" scoped>
/* 全局样式 */
.home-page {
  min-height: 100vh;
  background: 
	  url(https://www.rebirthealth.com/static/images/banner-bg.png) top no-repeat,
	  linear-gradient(180deg, #152d57 0%, #7aa9ff 100%);
  background-size: 100%;
  padding: 80rpx 32rpx;
  box-sizing: border-box;
}

/* Banner 区域 */
.banner {
  position: relative;

  .banner-bg {
    width: 100%;
  }

  .banner-text {
    color: #fff;

    .title {
      font-size: 60rpx;
      font-weight: bold;
      text-align: center;
      line-height: 100rpx;
    }

    .slogan {
      font-size: 40rpx;
      line-height: 100rpx;
    }

    .desc,
    .sub-desc {
      font-size: 26rpx;
      line-height: 40rpx;
    }
  }

  .shortcut-btns {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;

    .btn {
      padding: 4rpx 8rpx;
      font-size: 24rpx;
      color: #c3d4ff;
      line-height: 30rpx;
      background: rgba(110, 85, 246, 0.15);
      border-radius: 8rpx;
      border: 2rpx solid rgba(255, 255, 255, 0.1);
      margin-right: 6rpx;
    }
  }

  .input-row {
    display: flex;
    align-items: center;
    margin-top: 20rpx;

    .bounty-input {
      flex: 1;
      height: 60rpx;
      line-height: 60rpx;
      background-color: #fff;
      border-radius: 8rpx;
      padding: 0 20rpx;
      margin-right: 10rpx;
      font-size: 26rpx;
    }

    .bounty-btn {
      box-sizing: border-box;
      width: 160rpx;
      height: 90rpx;
      line-height: 90rpx;
      text-align: center;
      color: #fff;
      font-weight: bold;
      font-size: 36rpx;
      background: linear-gradient(270deg, #6e55f6 0%, #2e44f5 100%);
      border-radius: 12rpx;
      border: 2rpx solid rgba(251, 251, 251, 0.65);
      margin-left: 10rpx;
    }
  }
}

.section-title {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 32rpx;
  margin-top: 64rpx;
  text-align: center;
  color: #fff;
}

/* 通用区块样式 */
.section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;

  .section-desc {
    font-size: 28rpx;
    line-height: 40rpx;
    color: #666;
  }
}

.run-wrap {
  image {
    width: 100%;
    height: 344rpx;
  }

  .run-title {
    margin: 32rpx 0 16rpx 0;
    font-size: 32rpx;
    color: #333;
  }
}

/* 评审团队卡片 */
.team-card {
  margin-top: 32rpx;

  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;

    image {
      height: 72rpx;
      width: 72rpx;
      margin-right: 16rpx;
    }
  }

  .card-subtitle {
    position: relative;
    color: #333;
    font-size: 32rpx;
    margin-top: 32rpx;
    margin-bottom: 32rpx;

    &::after {
      content: "";
      position: absolute;
      bottom: -10rpx;
      left: 0;
      width: 72rpx;
      background: linear-gradient(to right, #0085ff 0%, #88c6ff 100%);
      height: 8rpx;
    }
  }
}

.why-wrap {
  background-image: url("https://www.rebirthealth.com/static/images/bg.png");
  background-size: 100% 100%;

  .why-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .section-desc {
    color: #fff;
  }

  .content-img {
    width: 200rpx;
    height: 200rpx;
  }

  .why-title {
    font-weight: bold;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 36rpx;
    margin: 32rpx 0;
  }
}

/* 反馈卡片 */
.feedback-card {
  .feedback-avatar {
    width: 72rpx;
    height: 72rpx;
    border-radius: 50%;
    margin-right: 16rpx;
  }

  .feedback-name {
    flex: 1;
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
    color: #333;
  }

  .feedback-text {
    font-size: 26rpx;
    line-height: 40rpx;
    color: #666;
  }
}
</style>